<template>
	<div class="home-icon">
		<div class="icon-list">
			<swiper 
				:options="swiperOption"		
			>
			    <swiper-slide
					v-for="pageItem of pageList"
					:key="pageItem.id"
			    >
			    	<div 
						class="icon-item"
						v-for="item of pageItem"
						:key="item.id"
					>
						<div class="icon-img-container">
							<img :src="item.imgUrl" alt="图标" class="icon-img">
						</div>
						<div class="icon-desc">{{item.desc}}</div>
					</div>
			    </swiper-slide>
			    <div class="swiper-pagination"  slot="pagination"></div>
			</swiper>
		</div>
		<div class="icon-related border-top">
			<div class="area-info border-right">
				<span class="iconfont">&#xec3f;</span>
				附近
			</div>
			<div class="recommend-top">
				<span class="iconfont">&#xe62a;</span>
				必游榜单
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name:'HomeIcon',
		props: {
			list:Array
		},
		data() {
			return {
				swiperOption: {
					pagination:".swiper-pagination",
					loop:true
				},
			}
		},
		computed: {
			pageList() {
				/**
				 * 数组pages用于存放分页（轮播）的页数
				 */
				const pages=[];
				/**
				 * 循环遍历list
				 * 判断每个list所在的页数
				 */
				this.list.forEach((item,index) => {
					/* 每页存放8个数据 */
					const page=Math.floor(index/8);
					/* 如果页数不存在 */
					if(!pages[page]) {
						/* 新建一个新的页数 */
						pages[page]=[];
					}
					pages[page].push(item);
				})
				return pages;
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import 'styles/mixins';
	.icon-list /deep/ .swiper-container {
		height: 0;
		padding-bottom: 57%;
	}
	.home-icon {
		.icon-list {
			.icon-item {
				position: relative;
				overflow: hidden;
				width: 25%;
				float: left;
				height: 0;
				padding-bottom: 25%;
				text-align: center;
				.icon-img-container {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: .5rem;
					box-sizing: border-box;
					padding: .1rem .1rem 0;
					.icon-img {
						display: block;
						height: 100%;
						margin: 0  auto;
					}
				}
				.icon-desc {
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					height: .5rem;
					line-height: .5rem;
					@include textEllipsis;
				}
			}
		}
		.icon-related {
			display: flex;
			text-align: center;
			line-height: .65rem;
			.area-info,
			.recommend-top {
				flex:1;
			}
		}
	}
</style>